<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    ></pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:option="scope">
        <el-button type="primary" plain @click="detail(scope.row)">
          详情
        </el-button>
      </template>
    </pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>

    <pub-dialog
      v-if="editDialogVisible"
      title="详情"
      v-model:visible="editDialogVisible"
      width="1000px"
      :hasExtraBtn="false"
    >
      <editDialog :row="row" />
    </pub-dialog>
  </list-page>
</template>

<script setup>
import { useTable } from '@/hooks/UseTable'
import { getLogList } from '@/api/log.js'
import editDialog from './edit.vue'
const searchColumns = ref([
  {
    label: 'IP',
    el: 'Input',
    bind: 'ip',
    defaultValue: '',
    labelWidth: 70
  },
  {
    label: '操作日期',
    el: 'DateRange',
    bindBegin: 'startTime',
    bindEnd: 'endTime',
    defaultValue: ['', ''],
    labelWidth: 80
  },
  {
    label: '所属机构',
    el: 'Input',
    bind: 'orgName',
    defaultValue: '',
    labelWidth: 80
  }
])
const columns = ref([
  { label: '操作时间', prop: 'operateTime' },
  {
    label: '请求地址',
    prop: 'url'
  },
  { label: '耗时', prop: 'costTime' },
  { label: 'IP', prop: 'ip' },
  { label: '浏览器', prop: 'explore' },
  {
    label: '账号',
    prop: 'userAccount'
  },
  { label: '机构', prop: 'orgName' },

  {
    label: '页面或功能',
    prop: 'func'
  },
  {
    label: '子模块',
    prop: 'subModule'
  },
  {
    label: '模块',
    prop: 'moduleName'
  },
  {
    label: '日志类型',
    prop: 'operateType',
    type: 'formatDict',
    formatCode: 'CZLX'
  },
  {
    label: '日志来源',
    prop: 'subSystem'
  },
  { label: '操作', type: 'option', width: '120' }
])

const row = ref({})
const editDialogVisible = ref(false)

let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(getLogList)

const detail = val => {
  row.value = val
  editDialogVisible.value = true
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped></style>
